<template>
	<view>
		<TopNavCustom :title="title"></TopNavCustom>
		<u-picker :show="show" :columns="columns" @confirm="confirm" :title="pickerTitle" @cancel="cancelPicker"
			keyName='faultName'>
		</u-picker>
		<u-datetime-picker :show="showDateTime" v-model="dateTime" mode="datetime" closeOnClickOverlay
			@confirm="confirmDateTime" @cancel="cancelDateTime" :title="pickerDateTitle">
		</u-datetime-picker>
		<u--form :model="qualityForm" ref="refForm">
			<view class="add-zone">
				<view class="click-zone">
					<image src="/static/home_icons/delete.png" class="pix"></image>
					<image src="/static/home_icons/add.png" class="pix"></image>
				</view>
				<view class="add-form">
					<u-cell-group :border="false">
						<u-cell size="normal" title="问题类别" isLink :value="qualityForm.faultName" @click="showPicker(0)">
						</u-cell>
						<u-cell size="normal" title="问题部位">
							<view slot="value">
								<input type="text" style="text-align: right;" v-model="qualityForm.issueLocation"
									placeholder="请输入问题部位" />
							</view>
						</u-cell>
						<u-cell size="normal" title="问题处理人">
							<view slot="value">
								<input type="text" style="text-align: right;" v-model="qualityForm.handlerUserId"
									placeholder="输入问题处理人" />
							</view>
						</u-cell>
						<u-cell size="normal" title="发现时间" :value="qualityForm.discoveryTime"></u-cell>
						<u-cell size="normal" title="预计处理时间" :value="qualityForm.estimatedProcessingTime" isLink
							@click="showPicker(1)">
						</u-cell>
						<u-cell size="normal" title="问题描述" :border="false" :value="qualityForm.input_num +'/200'"></u-cell>
						<view class="pixs">
							<textarea  class="_textarea" maxlength="200" @input="monitorInput(qualityForm)"
								v-model="qualityForm.issuesDesc" placeholder="请描述问题，最多输入200个字" />
							<!-- <span class="numLimit">{{qualityForm.input_num}}/200</span> -->
						</view>
						<u-cell size="normal" title="现场情况" :border="false"></u-cell>
						<view class="pixs">
							<u-upload :fileList="fileList" @afterRead="afterRead" name="pix" :maxCount="9"
								width="188rpx" height="188rpx" :previewFullImage="true" multiple @delete="deletePic"
								:itemData="qualityForm">
							</u-upload>
						</view>
					</u-cell-group>
				</view>
			</view>
			<view class="btns">
				<button type="default" class="next" @click="goto()">提交上传</button>
			</view>
		</u--form>
	</view>
</template>

<script>
	import _utils from "@/common/_utils.js"
	import $C from '@/common/config.js'
	import _public from "@/common/public.js"
	import _file from "@/common/file.js"
	import _question from "@/common/question.js"
	export default {
		onLoad(_node) {
			this.node = JSON.parse(decodeURIComponent(_node.item))
			this.title = this.node.title
			console.log(this.node)
			this.qualityForm = this.node
			this.qualityForm.input_num = this.qualityForm.issuesDesc.length
			//照片回显
			if (this.node.issueImages != null) {
				let imgIdArray = this.node.issueImages.split(',')
				// this.fileList
				let temp = []
				for (let i = 0; i < imgIdArray.length; i++) {
					let element = {
						status: 'success',
						message: '',
						urlId: imgIdArray[i]
					}
					element.url = $C.baseUrl + '/file/download?fileId=' + imgIdArray[i]

					temp.push(element)
				}
				this.fileList = temp
			}
		},
		data() {
			return {
				time: uni.$u.timeFormat(false, 'yyyy-mm-dd'),
				title: "",
				temp: '',
				estateId: '',
				node: {},
				pickerDateTitle: '',
				showDateTime: false,
				dateTime: Number(new Date()),
				qualityForm: {
					input_num: 0
				},
				flag: 0,
				columns: [],
				pickerTitle: '',
				show: false,
				qualityList: [],
				fileList: []
			};
		},
		created() {
			this.getQuality()
		},
		methods: {
			monitorInput(item) {
				this.qualityForm.input_num = item.issuesDesc.length
			},
			returnLeft() {
				this.$emit('returnLast')
			},
			removeCard(data) {
				let index = this.qualityForm.items.indexOf(data)
				if (index !== -1) {
					this.qualityForm.items.splice(index, 1)
				}
			},
			goto() {
				//数据校验
				let flag = true
				let _form_data = this.qualityForm
				if (_form_data.faultName == '') {
					uni.$showMsg('尚未选择问题类别')
					flag = false

				} else if (_form_data.issueLocation == '') {
					uni.$showMsg('尚未输入问题部位')
					flag = false
				} else if (_form_data.estimatedProcessingTime == '') {
					uni.$showMsg('尚未上选择预处理时间')
					flag = false

				} else if (_form_data.handlerUserId == '') {
					uni.$showMsg('组尚未上输入问题处理人')
					flag = false

				} else if (_form_data.issuesDesc == '') {
					uni.$showMsg('尚未描述问题')
					flag = false

				} else if (this.fileList.length == 0) {
					uni.$showMsg('尚未上传现场图片')
					flag = false
				}
				if (flag) {
					let cloneData = uni.$u.deepClone(this.qualityForm)
					// for (let i = 0; i < cloneData.length; i++) {
					let pixs = []
					for (let j = 0; j < this.fileList.length; j++) {
						pixs.push(this.fileList[j].urlId)
					}
					cloneData.issuesStatus = 2
					cloneData.issueImages = pixs.toString()
					// }
					if (_question.modQuestionStatus(cloneData)) {
						uni.$showMsg("修改成功")
					} else {
						uni.$showMsg('提交失败')
					}
				}

			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			confirmDateTime(time) {
				this.qualityForm.estimatedProcessingTime = uni.$u.timeFormat(time.value,
					'yyyy-mm-dd hh:MM')
				this.showDateTime = false
			},
			cancelPicker() {
				this.show = false
			},
			cancelDateTime() {
				this.showDateTime = false
			},
			confirm(item) {
				switch (this.flag) {
					case 0:
						this.qualityForm.faultId = item.value[0].faultId
						this.qualityForm.faultName = item.value[0].faultName
						break;
				}
				this.show = false
			},
			//获取质量问题列表
			async getQuality() {
				let form = {
					type: 1,
					parentId: '1'
				}
				let item = await _question.getQuestionChild(form)
				this.qualityList = item ? item : []
			},
			showPicker(item) {
				this.flag = item
				switch (this.flag) {
					case 0:
						this.pickerTitle = '质量问题类别'
						this.columns = [this.qualityList]
						this.show = true
						break;
					case 1:
						this.pickerDateTitle = '预计处理时间'
						this.showDateTime = true
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {
		display: flex;
		flex-direction: column;

		.pixs {
			padding: 20rpx;
		}
	}

	.click-zone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.pix {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.btns {
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 95rpx;

		.next {
			width: 560rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}
	}

	._textarea {
		// width: 620rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}
	
	.numLimit {
		position: relative;
		top: -40rpx;
		right: -530rpx;
	
	}
</style>
